<template>
	<!--数据统计-pop详情-->
	<view class="page-content">
		<view class="page-top">
			<!-- 标题栏和状态栏占位符 -->
			<view class="titleNview-placing"></view>
			<!-- 标题+筛选 -->
			<w-sel-search topType="two" :col_num="4" label_height="52" :pageobj="pageobj" popHeight="100%"
				leftIcon="arrowleft" cenTit="详情" cenType="title" iconfont="28" :is_back="false" popType="two"
				@back="back"  @previewconfirm="previewconfirm"
				@changecheck="changecheck" @changecheck2="changecheck2" @toClick="toClick" >
			</w-sel-search>
		</view>
		<scroll-view class="page-body" :scroll-top="scrollTop" scroll-y="true">
			<!--产品详情-->
				<view class="body-box">
					<!-- <block v-for="(item,index) in objdata.objlist" :key="index">
						<view class="body-box-li" @click="selnum(index)">
							<statistics-num-li :pageType="pageType" :obj="item" :list="list" @choose="choose"
								@confirm="confirm_sel" @sel_mat="sel_mat"></statistics-num-li>
						</view>
					</block> -->
					<view class="body-box-li">
						<statistics-num-li :pageType="pageType" :obj="objdata" :list="list" @choose="choose" :is_show_cou_mon="false"
							@confirm="confirm_sel" @sel_mat="sel_mat"></statistics-num-li>
					</view>
				</view>
				<view class="btn-box">
					<view class="num">数量：{{objdata.count_num}}</view>
					<view class="mon">金额：{{objdata.count_money}}</view>
				</view>
		</scroll-view>
	</view>
</template>

<script>
	import { 
		taskDataInfoss,
	    taskAlbumJoinLists,
	    getProductCodingLists, //获取POP/道具编码列表
	} from '@/common/api.js';
	import wSelSearch from '@/components/w-sel-logo/w-sel-search2.vue'; //标题
	import loadMore from '@/components/uni-load-more/load-more.vue';
	import statisticsNumLi from '@/pages/components/statistics_num_li.vue';
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		components: {
			loadMore,
			statisticsNumLi,
			wSelSearch
		},
		data() {
			return {
				scrollTop: 0,
				noData: false,
				load_more1: '', //下拉加载文字
				load_sta: false, //是否是加载状态
				pageobj: {
					name: '单选',
					type: 'radio',
					count:0,
					submenu: [/* {
						name: "橱窗",
						id: 1,
						submenu: [{
								name: "玻璃贴",
								id: 1,
								type: 1,
								submenu: [{
									id:1,
									name: '玻璃贴左',
								}, {
									id:2,
									name: '玻璃贴右',
								}]
							},
							{
								name: "休闲",
								id: 2,
								type: 2,
							}, {
								name: "背景海报",
								id: 3,
								type: 2,
							},
							{
								name: "道具POP",
								id: 4,
								type: 2,
							}
						]
					}, {
						name: "VP",
						id: 2,
						submenu: [{
								name: "背景海报",
								id: 1,
								type: 2,
							},
							{
								name: "休闲",
								id: 2,
								type: 2,
							}, {
								name: "背景海报",
								id: 3,
								type: 2,
							},
							{
								name: "道具POP",
								id: 4,
								type: 2,
							}
						]
					}, {
						name: "地杆",
						id: 3,
						submenu: [{
								name: "背景海报",
								id: 1,
								type: 1,
							},
							{
								name: "休闲",
								id: 2,
								type: 2,
							}, {
								name: "背景海报",
								id: 3,
								type: 2,
							},
							{
								name: "道具POP",
								id: 4,
								type: 2,
							}
						]
					} */]
				},
				id: 1,
				pageType: '',
				objdata: {
					count_money: 1000000.00,
					count_num: 99999,
					objlist: {},
					/* {
						pro_img: '/static/data-img/img.jpg',
						pro_name: 'XX系列图片系列图片系列图片',
						pro_txt: ['男', '鞋', '都市'],
						remark: '此订单需注意尺寸',
					
						datalist: [{
							pro_name: '橱窗',
							texture: ['塑料', '玻璃', '棉'],
							list: [{
								type: 1,
								name: '玻璃贴',
								list: [{
									name: '玻璃左',
									num: 570,
									money: '370',
								}, {
									name: '玻璃左',
									num: 5700,
									money: '37000.00',
								}]
							}, {
								name: '背景海报',
								type: 2,
								num: 570,
								money: '370',
							}, {
								name: '道具POP',
								type: 2,
								num: 5700,
								money: '37000.00',
							}]
						}, {
							pro_name: '橱窗',
							texture: ['塑料', '玻璃', '棉'],
							list: [{
								type: 1,
								name: '玻璃贴',
								list: [{
									name: '玻璃左',
									num: 570,
									money: '370',
								}, {
									name: '玻璃左',
									num: 5700,
									money: '37000.00',
								}]
							}, {
								name: '背景海报',
								type: 2,
								num: 570,
								money: '370',
							}, {
								name: '道具POP',
								type: 2,
								num: 5700,
								money: '37000.00',
							}]
						}]
					} */
				},
				list: [/* {
					name: '塑料'
				}, {
					name: '黑胶玻璃贴'
				}, {
					name: '皮革'
				}, {
					name: '纸'
				}, {
					name: '丝绸'
				}, {
					name: '棉丝皮革纸'
				}, {
					name: '塑料'
				}, {
					name: '黑胶玻璃贴'
				}, {
					name: '皮革'
				}, {
					name: '纸'
				}, {
					name: '丝绸'
				}, {
					name: '棉丝皮革纸'
				}, {
					name: '塑料'
				}, {
					name: '黑胶玻璃贴'
				}, {
					name: '皮革'
				}, {
					name: '纸'
				}, {
					name: '丝绸'
				}, {
					name: '棉丝皮革纸'
				}, {
					name: '塑料'
				}, {
					name: '黑胶玻璃贴'
				}, {
					name: '皮革'
				}, {
					name: '纸'
				}, {
					name: '丝绸'
				}, {
					name: '棉丝皮革纸'
				} */],
				system: {
					w: 0,
					h: 0,
					scale: 1,
					systemScale: 1,
				},
				sel_index: 0, //选择当前项
				params:{
					id:0,
					task_id:0,
					product_coding_id:[]
				},
				pagedata: {
					company_id: 0,
					name: '',
					top_id: 0,
					id: 0,
					type: 0
				},
			}
		},
		computed: {
			...mapGetters(['companyInfo']),
			img_width() {
				return (this.system.w - 42) / 3;
			}
		},
		onShow() {
			uni.getSystemInfo().then(res => {
				let system = res[1]
				this.system.scale = 667 / 375 //按照苹果留 375*667比例 其他型号手机等比例缩放 显示
				this.system.systemScale = system.windowWidth / 375 //按照苹果留 375*667比例 其他型号手机等比例缩放 显示
				this.system.w = system.windowWidth;
				this.system.h = system.windowHeight;
			})
			this.getdata();
		},
		onLoad(option) {
			console.log(222, option)
			this.pagedata.company_id = this.companyInfo.id;
			if (!!option.id) {
				this.params.id = option.id;
			}
			if (!!option.pageType) {
				this.pageType = option.pageType;
				if (option.pageType === 'pop') {
					this.pagedata.type = 1;
				} else if (option.pageType === 'prop') {
					this.pagedata.type = 2;
				}
				this.getdata2();
			}
			if(!!option.task_id){
				this.params.task_id= option.task_id;
			}
		},
		methods: {
			//预览确定
			previewconfirm(){
				console.log(111222,this.pageobj.submenu)
				let product_coding_id = [];
				if(this.pageobj.submenu && this.pageobj.submenu.length>0){
					this.pageobj.submenu.forEach(item=>{
						if(item.count>0){
							product_coding_id.push(item.id)
						}
						if(item.submenu && item.submenu.length>0){
							item.submenu.forEach(item2=>{
								if(item2.checked){
									product_coding_id.push(item2.id)
									if(item2.has_next){
										if(item2.submenu && item2.submenu.length>0){
											item2.submenu.forEach(item3=>{
												if(item3.checked){
													product_coding_id.push(item3.id)
												}
											})
										}
									}
								}
							})
						}
					})
				}
				this.params.product_coding_id = product_coding_id
				this.getdata();
			},
			//点击折叠下拉
			toClick(id, isOpen) {
				console.log(111, id, isOpen)
				/* if (this.pageobj.submenu && this.pageobj.submenu.length > 0) {
					this.pageobj.submenu.forEach(item => {
						if (item.id === id) {
							item.isOpen = isOpen
							if (item.has_next) {
								if (isOpen) {
									if (this.pageType === 'pop') { //pop
										this.pagedata.top_id = id;
										getProductCodingLists(this.pagedata).then(res2 => {
											if (res2.code === 2000) {
												this.$nextTick(() => {
													console.log(88888, res2.data)
													item.submenu = res2.data;
			
													if (res2.data && res2.data.length > 0) {
														res2.data.forEach(item2 => {
															if (item2.has_next) {
																this.$set(item2, 'submenu',Array);
																getProductCodingLists({
																	company_id: this.pagedata.company_id,
																	top_id: item2.id,
																	type: this.pagedata.type
																}).then(res3 => {
																	
																	item2.submenu = res3.data;
																	if(item2.submenu && item2.submenu.length>0){
																		item2.submenu.forEach(item4=>{
																			this.$set(item4,'checked',false)
																		})
																	}
																})
															}else{
																this.$set(item2,'checked',false)
															}
														})
													}
												})
											}
										})
			
									} else if (this.pageType === 'prop') { //prop
										this.pagedata.top_id = id;
										getProductCodingLists(this.pagedata).then(res2 => {
											if (res2.code === 2000) {
												this.$nextTick(() => {
													item.submenu = res2.data;
													if(item.submenu && item.submenu.length>0){
														item.submenu.forEach(item4=>{
															this.$set(item4,'checked',false)
														})
													}
												})
											}
										})
									}
								}
							}
						}
					})
					console.log(22222, this.pageobj)
				} */
			},
			//获取数据-筛选框数据
			getdata() {
				taskDataInfoss({id:this.params.id,product_coding_id:this.params.product_coding_id}).then(res=>{
					if(res.code === 2000){
						let datalist = [];
						const resData = res.data
						this.$set(resData, 'datalist', datalist)
						this.$set(resData, 'count_num', 0)
						this.$set(resData, 'count_money', 0)
						if(resData.list && resData.list.length>0){
							resData.list.forEach(item=>{
								resData.count_num += item.number;
								resData.count_money += item.price;
								if (item.top_id === 0) {
									resData.datalist.push(item)
									let data = [];
									this.$set(item, 'data', data)
									if(resData.datalist && resData.datalist.length>0){
										resData.datalist.forEach(item3=>{
											if (item.top_id === item3.product_coding_id) {
												item3.data.push(item)
											}
										})
									}
								}
								if(resData.datalist && resData.datalist.length>0){
									resData.datalist.forEach(item3=>{
										if (item.top_id === item3.product_coding_id) {
											item3.data.push(item)
										}
										if(item3.data && item3.data.length>0){
											item3.data.forEach(item4=>{
												let data = [];
												this.$set(item4, 'data', data)
											})
										}
									})
								}
								if(resData.datalist && resData.datalist.length>0){
									resData.datalist.forEach(item3=>{
										if(item3.data && item3.data.length>0){
											item3.data.forEach(item4=>{
												if (item.top_id === item4.product_coding_id) {
													item4.data.push(item);
												}
											})
										}
									})
								}
							})
						}
						this.objdata = resData;
						console.log(1111,this.objdata)
					}
				})
			},
			getdata2(){
				if (this.pageType === 'pop') { //pop
					this.pagedata.id = 0;
					this.pagedata.top_id = 0
					getProductCodingLists(this.pagedata).then(res => {
						if (res.code === 2000) {
							let pageobj = res.data;
							if (pageobj && pageobj.length > 0) {
								pageobj.forEach(item => {
									let submenu = [];
									this.$set(item, 'submenu', submenu);
									this.$set(item, 'isOpen', false);
									this.$set(item, 'count', 0);
									if(item.has_next){
										if (this.pageType === 'pop') { //pop
											this.pagedata.top_id = item.id;
											getProductCodingLists(this.pagedata).then(res2 => {
												if (res2.code === 2000) {
													this.$nextTick(() => {
														console.log(88888, res2.data)
														item.submenu = res2.data;
													
														if (res2.data && res2.data.length > 0) {
															res2.data.forEach(item2 => {
																if (item2.has_next) {
																	this.$set(item2, 'submenu',Array);
																	getProductCodingLists({
																		company_id: this.pagedata.company_id,
																		top_id: item2.id,
																		type: this.pagedata.type
																	}).then(res3 => {
																		
																		item2.submenu = res3.data;
																		if(item2.submenu && item2.submenu.length>0){
																			item2.submenu.forEach(item4=>{
																				this.$set(item4,'checked',false)
																			})
																		}
																	})
																}else{
																	this.$set(item2,'checked',false)
																}
															})
														}
													})
												}
											})
										}
									}
								})
							}
							this.pageobj.submenu = pageobj;
							this.$forceUpdate() //二维数组，开启强制渲染
						}
					})
				} else if (this.pageType === 'prop') { //prop
					this.pagedata.top_id = 0;
					getProductCodingLists(this.pagedata).then(res => {
						if (res.code === 2000) {
							let pageobj = res.data;
							if (pageobj && pageobj.length > 0) {
								pageobj.forEach(item => {
									let submenu = [];
									this.$set(item, 'submenu', submenu);
									this.$set(item, 'isOpen', false);
									this.$set(item, 'count', 0);
									if(item.has_next){
										if (this.pageType === 'prop') { //prop
											this.pagedata.top_id = item.id;
											getProductCodingLists(this.pagedata).then(res2 => {
												if (res2.code === 2000) {
													this.$nextTick(() => {
														item.submenu = res2.data;
														if(item.submenu && item.submenu.length>0){
															item.submenu.forEach(item4=>{
																this.$set(item4,'checked',false)
															})
														}
													})
												}
											})
										}
									}
								})
							}
							this.pageobj.submenu = pageobj;
							this.$forceUpdate() //二维数组，开启强制渲染
						}
					})
				}
			},
			//一级复选框
			changecheck(id1, id2, checked) {
				if (this.pageobj.submenu && this.pageobj.submenu.length > 0) {
					this.pageobj.submenu.forEach(item => {
						if (item.id === id1) {
							if(item.submenu && item.submenu.length>0){
								item.submenu.forEach(item2 =>{
									if (item2.type === 1) {
										if(item2.id===id2){
											if(!item2.has_next){
												item2.checked = !checked
											}
										}
									} else if (item2.type === 2) {
										if(item2.id===id2){
											item2.checked = !checked
											//设置预览-可见
											if(item2.checked===true){
												item.checked = true
											}
										}
									}
								})
							}
						}
					})
				}
				
				console.log(22,id1, id2, checked,this.pageobj.submenu)
				let count = 0
				if (this.pageobj.submenu && this.pageobj.submenu.length > 0) {
					this.pageobj.submenu.forEach(item => {
						if (item.submenu && item.submenu.length > 0) {
							item.submenu.forEach(item2 => {
								if (item2.type === 1 && item2.has_next) {
									if (item2.submenu && item2.submenu.length > 0) {
										item2.submenu.forEach(item3 => {
											if (item3.checked === true) {
												count += 1
											}
										})
									}
								} else if ((item2.type === 1 || item2.type === 2) && !item2.has_next) {
									if (item2.checked === true) {
										count += 1
									}
								}
							})
						}
						item.count = count;
					})
				}
				this.pageobj.count = count;
			},
			//二级复选框
			changecheck2(id1, id2, id3, checked) {
				console.log(11,id1, id2, id3, checked)
				if (this.pageobj.submenu && this.pageobj.submenu.length > 0) {
					this.pageobj.submenu.forEach(item => {
						if (item.id === id1) {
							if(item.submenu && item.submenu.length>0){
								item.submenu.forEach(item2 =>{
									if (item2.type === 1) {
										if(item2.id===id2){
											if(item2.submenu && item2.submenu.length>0){
												item2.submenu.forEach(item3 =>{
													if(item3.id===id3){
														item3.checked = !checked
													}
													//设置预览-可见
													if(item3.checked===true){
														item.checked = true
														item2.checked = true
													}
												})
											}
										}
									} else if (item2.type === 2) {
										if(item2.id===id2){
											item2.checked = !checked
										}
										//设置预览-可见
										if(item2.checked===true){
											item.checked = true
										}
									}
								})
							}
						}
					})
				}
				let count = 0
				if (this.pageobj.submenu && this.pageobj.submenu.length > 0) {
					this.pageobj.submenu.forEach(item => {
						if (item.submenu && item.submenu.length > 0) {
							item.submenu.forEach(item2 => {
								if (item2.type === 1 && item2.has_next) {
									if (item2.submenu && item2.submenu.length > 0) {
										item2.submenu.forEach(item3 => {
											if (item3.checked === true) {
												count += 1
											}
										})
									}
								}else if ((item2.type === 1 || item2.type === 2) && !item2.has_next) {
									if (item2.checked === true) {
										count += 1
									}
								}
							})
						}
					})
				}
				this.pageobj.count = count;
			},
			//材质选择
			choose(index) {
				if (this.list && this.list.length > 0) {
					this.list.forEach((item, ind) => {
						if (ind === index) {
							item.statu = !item.statu
						}
					})
				}
			},
			//材质弹窗
			sel_mat() {
				if (this.list && this.list.length > 0) {
					this.list.forEach((item, ind) => {
						this.$set(item, 'statu', false);
					})
				}
			},
			//确认材质选择
			confirm_sel(list, index) {
				console.log(555, list)
				if (this.objlist && this.objlist.length > 0) {
					this.objlist.forEach((item, i) => {
						if (this.sel_index === i) {
							if (item.datalist && item.datalist.length > 0) {
								item.datalist.forEach((item2, ii) => {
									if (index === ii) {
										item2.texture = list;
									}
								})
							}
						}
					})
				}
			},
			//筛选项
			selnum(index) {
				console.log(12, index)
				this.sel_index = index;
			},
			//下一步
			confirm() {
				uni.navigateTo({
					url: '/pages/order/PopConfirmOrder'
				})
			},
			//返回
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			//重置筛选
			resetFilterData() {

			},
			//确认筛选
			setFilterData() {

			},
			loadmore() {

			},
		}
	}
</script>

<style lang="scss">
	.titleNview-placing {
		height: var(--status-bar-height);
		box-sizing: content-box;
		background: $uni-bg-color;
		display: block;
		position: sticky;
		top: 0rpx;
		z-index: 9999;
		overflow: hidden
	}

	.page-content {
		width: 100vw;
		height: 100%;

		.page-top {
			display: flex;
			flex-direction: column;
			box-sizing: content-box;
			background: $uni-bg-color;
			display: block;
			position: sticky;
			top: 0rpx;
			z-index: 9999;
			border-bottom: 1rpx solid #f5f5f5;
		}

		.page-body {
			display: flex;
			height: calc(100% - 180rpx - var(--status-bar-height));
			padding:0;
			background: $uni-bg-color-grey;


			.btn-box {
				width: 100%;
				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
				height: 90rpx;
				display: flex;
				justify-content: space-between;
				flex-shrink: 0;
				align-items: center;
				font-size: 36rpx;
				font-weight: 400;
				line-height: 90rpx;
				color: $font-color-w;
				background-color: #198FFF;
				padding: 0 30rpx;
			}


			.body-box {
				display: flex;
				flex-direction: column;
			}
		}
	}
</style>
